<template>
  <q-page>
    <q-item-label>选择账号</q-item-label>
    <q-select
      v-model="data.accounts.selected"
      :options="data.accounts.options"
      label="选择账号"
    >
      <template v-slot:selected v-if="data.accounts.selected">
        <span>
          {{ data.accounts.selected.nickname || "空" }}
        </span>
        <span class="text-grey on-right">
          ({{ data.accounts.selected.expire }})
        </span>
      </template>
      <template v-slot:option="scope">
        <q-item v-bind="scope.itemProps">
          <q-item-section>
            <q-item-label>{{ scope.opt.nickname || "空" }}</q-item-label>
          </q-item-section>
          <q-item-section side>
            <q-item-label caption>{{ scope.opt.expire }}</q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </q-select>

    <div class="row q-col-gutter-lg q-px-md q-pb-md">
      <template v-for="(item, index) in data.products.list" :key="index">
        <div class="col">
          <q-card
            class="text-center cursor-pointer"
            :class="{ 'products-active': data.products.selected === item }"
            @click="data.products.selected = item"
          >
            <q-card-section>
              <div class="text-h6">
                {{ item.title }}
              </div>
              <div class="text-subtitle2">
                {{ item.describe }}
              </div>
            </q-card-section>
            <q-card-section>
              <span>¥</span>
              <span>78</span>
              <span>/月</span>
            </q-card-section>
            <q-separator />
            <q-item>
              <q-item-section>
                <q-item-label
                  >节省{{
                    parseInt(
                      ((item.original_price - item.price) /
                        item.original_price) *
                        100
                    )
                  }}%</q-item-label
                >
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item class="products-total">
              <q-item-section>
                <q-item-label>总价：¥{{ item.price }}</q-item-label>
              </q-item-section>
            </q-item>
            <!-- <div class="bg-grey text-white products-total">总价：¥88</div> -->
          </q-card>
        </div>
      </template>
    </div>
    <PaymentTypes v-model="data.aaa"></PaymentTypes>
  </q-page>
</template>

<script>
import { diffTime, isExpire } from "src/assets/utils";
import { api } from "src/boot/axios";
import PaymentTypes from "src/components/PaymentTypes.vue";
import { computed, defineComponent, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  name: "PagesPaymentPageVue",
  components: { PaymentTypes },
  setup() {
    const $store = useStore();
    const $route = useRoute();
    function expireTime(expires_time) {
      if (expires_time === 0) {
        return "永久";
      }
      if (isExpire(expires_time)) {
        return "已到期";
      }
      const currentTime = parseInt(+new Date() / 1000);
      const diff = diffTime(expires_time - currentTime);
      if (diff.days) {
        return diff.days + "天后到期";
      }
      if (diff.hours) {
        return diff.hours + "小时到期";
      }
      if (diff.minutes) {
        return diff.minutes + "分钟到期";
      }
      if (diff.seconds) {
        return diff.seconds + "秒到期";
      }
      return "";
    }
    const data = reactive({
      accounts: {
        options: computed(() => {
          const list = [];
          for (const id in $store.state.persisted.accounts) {
            if (
              Object.hasOwnProperty.call($store.state.persisted.accounts, id)
            ) {
              const acc = $store.state.persisted.accounts[id];
              if (acc.expires_time === 0) {
                continue;
              }
              list.push({
                accounts_id: acc.accounts_id,
                nickname: acc.nickname,
                userid: acc.userid,
                expires_time: acc.expires_time,
                expire: expireTime(acc.expires_time),
              });
            }
          }
          list.sort((a, b) => a.expires_time - b.expires_time);
          return list;
        }),
        selected: null,
      },
      products: {
        list: [],
      },
    });
    onMounted(() => {
      data.accounts.selected = data.accounts.options.find(
        (v) => v.accounts_id == $route.params.id
      );
      if (!data.accounts.selected && data.accounts.options) {
        data.accounts.selected = data.accounts.options[0];
      }
    });
    api.get("products/index", { params: { type: 1 } }).then((res) => {
      data.products.list = res;
    });
    return { data };
  },
});
</script>

<style lang="scss" scoped>
.products-total {
  background-color: #4f5361;
  color: white;
}
.products-active {
  background-color: #1976d2;
  color: white;
  .products-total {
    background-color: #1976d2 !important;
    color: white;
  }
}
</style>
